<template>
    <div class="main">
        <el-card class="box-card" :body-style="{height: '100%'}">
            <!-- 搜索栏 -->
            <el-row class="search" style="display: flex;">
                <span class="title" v-if="userInfo.roleID != 2 && userInfo.roleID != 3">订单类型：</span>
                <el-select clearable v-model="form.query.orderType" placeholder="请选择" v-if="userInfo.roleID != 2 && userInfo.roleID != 3">
                    <el-option label="堂食" :value="0"></el-option>
                    <el-option label="外卖" :value="1"></el-option>
                </el-select>
                <span class="title">下单时间：</span>
                <el-date-picker v-model="form.query.sTime" type="date" placeholder="开始日期"></el-date-picker>
                <div style="margin-left: -20px;"><el-date-picker v-model="form.query.eTime" type="date" placeholder="结束日期"></el-date-picker></div>
                <el-button @click="getAllOrder">搜索</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table v-loading="loading" :data="tableData" border style="width: 100%;">
                <el-table-column prop="orderId" label="订单号" width="100"></el-table-column>
                <el-table-column prop="orderState" label="订单状态" align="center" width="150">
                    <template slot-scope="scope">
                        <el-select :disabled="userInfo.roleID == 999" v-model="scope.row.orderStatus" placeholder="请选择" @change="changeSelect(scope.row)">
                            <!-- 外卖订单才有配送中的选项 -->
                            <el-option label="配送中" v-if="scope.row.orderType == 1" :value="0"></el-option>
                            <el-option label="制作中" :value="1"></el-option>
                            <el-option label="已完成" :value="2"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="orderType" label="订单类型" align="center" width="80" :formatter="formatterOrderType"></el-table-column>
                <el-table-column prop="orderPrice" label="订单金额" align="center" width="80" :formatter="(row) => { return row.orderPrice + '￥' }"></el-table-column>
                <el-table-column prop="orderNum" label="菜品数量" align="center" width="80"></el-table-column>
                <el-table-column prop="orderTime" label="下单时间" align="center" width="180"></el-table-column>
                <el-table-column prop="orderContact" label="联系人" width="80" align="center"></el-table-column>
                <el-table-column prop="orderContactWay" label="联系方式" width="150" align="center"></el-table-column>
                <el-table-column prop="orderPlace" label="地址/桌号" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    data () {
        return {
            form: {
                query: {
                    orderId: "",
                    orderStatus: "",
                    orderType: "",
                    orderPrice: "",
                    orderNum: "",
                    orderTime: "",
                    sTime: "",
                    eTime: "",
                    orderEndTime: "",
                    orderContact: "",
                    orderContactWay: "",
                    orderPlace: ""
                },
                pageInfo:{
                    pageNum: 1,
                    pageSize: 1000
                }
            },
            // 用户信息
            userInfo: JSON.parse(window.sessionStorage.getItem('user')),
            // tableData: [],表格数据
            loading: false
        }
    },
    mounted() {
        // 页面加载获取订单数据
		this.getAllOrder()
    },
    methods: {
        // 根据订单类型显示文字
        formatterOrderType (row) {
            if (row.orderType == 0) return '堂食'; 
            else return '外卖';
        },
        // 获取所有订单
        getAllOrder () {
            // 过滤日期
            this.form.query.orderTime = ''
            this.form.query.orderEndTime = ''
            if (this.form.query.sTime && this.form.query.eTime) {
                this.form.query.orderTime = this.form.query.sTime.getFullYear() + '-' + (this.form.query.sTime.getMonth()+1) + '-' + this.form.query.sTime.getDate() + ' 00:00:00'
                this.form.query.orderEndTime = this.form.query.eTime.getFullYear() + '-' + (this.form.query.eTime.getMonth()+1) + '-' + this.form.query.eTime.getDate() + ' 23:59:00'
            }
            // 根据不同的角色,显示不同的订单
            if (this.userInfo.roleID == 2) {
                this.form.query.orderType = 1
            } else if (this.userInfo.roleID == 3) {
                this.form.query.orderType = 0
            }
            this.loading = true
            this.$http.post('order/queryAllOrderUnit',this.form).then(res => {
                this.loading = false
                if (res.data.meta.status == 200) {
                    if (this.userInfo.roleID == 999) { // 顾客只能看到自己的订单
                        let data = []
                        for (let i=0; i<res.data.data.list.length; i++) {
                            if (res.data.data.list[i].userid == this.userInfo.userID) {
                                data.push(res.data.data.list[i])
                            }
                        }
                        this.tableData = data
                        return
                    }
                    this.tableData = res.data.data.list
                } else {
                    this.$message({type: 'error', message: '获取失败'})
                }
            })
        },
        // 状态修改请求修改订单状态
        changeSelect (orderData) {
            this.$http.post('order/updateOrder',orderData).then(res => {
                this.loading = false
                if (res.data.meta.status == 200) {
                    this.$message({type: 'success', message: '更新成功'})
                } else {
                    this.$message({type: 'error', message: '更新失败'})
                }
                this.getAllOrder()
            })
        }
    }
}
</script>

<style scoped>
.main {
    height: 100%;
}
.el-table {
    height: calc(100% - 150px);
    overflow: auto;
}
.el-card {
    height: 100%;
}
.el-card__body {
    height: 100%;
}
.search {
    display: flex;
    margin-bottom: 20px;
}
.search .title {
    display: block;
    margin-right: 10px;
    text-align: right;
    line-height: 35px;
}
.search .el-input, .search .el-select, .search .el-date-picker {
    margin-right: 40px;
    width: 200px;
}
</style>